<template>
  <div class="window">
    <!--header-->
    <header-three :desc="xsdh"></header-three>
    <div class="v_div">
      宝贝即将售完, 再不抢就没了哦~
    </div>
    <!--page-->
    <div class="page">
      <img src="../../../assets/mianbao.png" alt="">
      <div class="imgright">
        <h3>手撕面包105g</h3>
        <p>口感一流, 营养又美味</p>
        <p>¥29.9</p>
      </div>
      <div class="jik">
        <div>马上抢 ></div>
        <p>还剩<span>01:59:59</span></p>
      </div>
    </div>
    <div class="page">
      <img src="../../../assets/mianbao.png" alt="">
      <div class="imgright">
        <h3>手撕面包105g</h3>
        <p>口感一流, 营养又美味</p>
        <p>¥29.9</p>
      </div>
      <div class="jik">
        <div>马上抢 ></div>
        <p>还剩<span>01:59:59</span></p>
      </div>
    </div>
    <div class="page">
      <img src="../../../assets/mianbao.png" alt="">
      <div class="imgright">
        <h3>手撕面包105g</h3>
        <p>口感一流, 营养又美味</p>
        <p>¥29.9</p>
      </div>
      <div class="jik">
        <div>马上抢 ></div>
        <p>还剩<span>01:59:59</span></p>
      </div>
    </div>
    <div class="page">
      <img src="../../../assets/mianbao.png" alt="">
      <div class="imgright">
        <h3>手撕面包105g</h3>
        <p>口感一流, 营养又美味</p>
        <p>¥29.9</p>
      </div>
      <div class="jik">
        <div>马上抢 ></div>
        <p>还剩<span>01:59:59</span></p>
      </div>
    </div>
    <!--topGo-->
    <a href="#" id="hu">🐯</a>
  </div>
</template>
<script>
  import HeaderThree from '../../shortProduct/HeaderThree.vue'
  export default {
    components: {
      HeaderThree
    },
    data() {
      return{
        xsdh: '限时断货'
      }
    }
  }
</script>
<style scoped>
  .window {
    height: 100rem;
  }
  .v_div {
    font-size: 1.5rem;
    color: #4d4d4d;
    background: #f2f2f2;
    padding: 1rem;
  }
  .page {
    padding: 1rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #cccccc;
  }
  .page img {
    width: 9rem;
    float: left;
    margin-right: 1rem;
  }
  .imgright {
    float: left;
  }
  .imgright h3 {
    font-size: 1.5rem;
    font-weight: 400;
  }
  .imgright p {
    margin-top: 0.8rem;
    font-size: 1.2rem;
  }
  .imgright p:nth-child(3) {
    color: red;
  }
  .jik {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
  }
  .jik div {
    border-radius: 10px;
    text-align: center;
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;
    color: white;
    background: red;
  }
  .jik span {
    color: red;
  }
  #hu {
    position: fixed;
    right: 2rem;
    bottom: 6rem;
    padding: 0.5rem;
    border-radius: 50%;
    background: turquoise;
  }
</style>
